<template>
    <div class="content">
        <div class="demo-input-size">
            <el-form
                :model="form"
                ref="numberValidateForm"
                label-width="100px"
            >
                <el-form-item label="数值" prop="value">
                    <el-input
                        placeholder="请输入数值"
                        suffix-icon="el-icon-setting"
                        v-model="form.value"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                    <el-input
                        placeholder="请输入单位"
                        suffix-icon="el-icon-setting"
                        v-model="form.unit"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <Temperature :value="form.value" :unit="form.unit" :min="form.min" :max="form.max" :key="num" :params="params"></Temperature>
    </div>
</template>

<script>
import Temperature from '../Temperature.vue'

export default {
    components: {
        Temperature,
    },
    props: {
        flag: {
            type: Number,
            default: 0
        },
        params: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            form: {
                value: '60',
                unit: '单位',
                min: '0',
                max: '100',
            },
            num: 0
        }
    },
    watch: {
        form: {
            handler(newValue) {
                this.num++
            },
            deep: true
        },
        flag(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.transferData()
            }
        }
    },
    methods: {
        transferData() {
            this.$emit('transferData', this.form)
        }
    }
}
</script>

<style>

</style>
